<!--
 * @Author: 260156 260156@gree.com.cn
 * @Date: 2022-08-12 10:56:01
 * @LastEditors: error: error: git config user.name & please set dead value or install git && error: git config user.email & please set dead value or install git & please set dead value or install git
 * @LastEditTime: 2024-11-20 16:06:23
 * @FilePath: \gree-zst-web\src\views\system\user\components\OrganizationTree.vue
 * @Description: 
 * 
 * Copyright (c) 2022 by 260156 260156@gree.com.cn, All Rights Reserved. 
-->
<template>
  <h3>选择部门</h3>
  <el-tree
    ref="menuTreeRef"
    :data="data"
    node-key="id"
    :props="defaultProps"
    @node-click="handleClick"
    highlight-current
    default-expand-all
    :expand-on-click-node="false"
  >
  </el-tree>
</template>

<script lang="ts" setup>
import { useManageStore } from "store/modules/manage";
import type { TableItem, TableData } from "views/system/organization/types";

const defaultProps = {
  children: "children",
  label: "name",
};

const manageStore = useManageStore();

const data = computed<TableData>(() => manageStore.organizationTree);

interface Emits {
  (e: "handleClick", params: TableItem): void;
}
const emit = defineEmits<Emits>();
const handleClick = (props: TableItem) => {
  emit("handleClick", props);
};
</script>

<style lang="scss" scoped>
h3 {
  text-align: left;
  margin: 0;
  padding: 10px 0 10px 14px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.15);
}
.el-tree {
  padding: 20px;
}
</style>
